<template>
	<view :data-theme="theme" class="container">
		<view class="header">
			<view class="bg_color" style="padding: 24rpx 24rpx;">
				<u-search v-model="name" @custom="searchProduct" @search="searchProduct" placeholder="请输入活动名称"
					actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
			</view>

			<!-- 秒杀活动日期筛选 -->
			<!-- <view style="background-color: #fff;padding-left: 20rpx;">
				<view style="display: flex; flex-flow: row;height: 40px;line-height: 40px;">
					<uni-datetime-picker v-model="data" type="daterange" @change="calendarConfirm" :color="bgColor"
						close clear>
						<view style="display: flex;flex-flow: row;" :style="{color:calendarShow?bgColor:null}"
							@click="calendarShow = true">
							<view style="font-size: 14px;margin-right: 6rpx;">申请日期</view>
							<u-icon :name="calendarShow?'arrow-up-fill':'arrow-down-fill'" size="12"
								:color="calendarShow?bgColor:''"></u-icon>
						</view>
					</uni-datetime-picker>

				</view>
			</view> -->
		</view>

		<!-- <view class="content"> -->
		<!-- 这里是可滚动的内容 -->
		<swiper class="tab-view" :duration="300" :current.sync="tabCurrentIndex">
			<swiper-item class="swiper-item" style="display: flex;">
				<scroll-view class="scroll-view" @scrolltolower="scrolltolowerFn" scroll-y
					style="height: 100%; overflow: hidden;">
					<seckill-page-list ref="tab" :theme="theme" :bgColor="bgColor" @searchProduct="searchProduct" @toSeckillProChoose="toSeckillProChoose"></seckill-page-list>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	let app = getApp();
	import seckillPageList from "./components/seckill-page-list.vue";
	// import activeContent from "./components/active-content-page.vue";
	export default {
		components: {
			seckillPageList,
			// activeContent
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				name: '', //秒杀活动名称
				data: '', //秒杀活动日期
				tabCurrentIndex: 0,
				tabValue: ['活动中/未开始', '已结束'],
				tabIndex: 0,
				items: ['活动中', '未生效'],
				currentInd: 0,
				styleType: 'text',
			};
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.tabList = [{
					id: "tab11",
					state: 0,
					name: '全部',
					type: 9, //必带类型
					orderList: []
				}
			];
			
		},
		methods: {
			/* 搜索事件 */
			searchProduct(value) {
				this.$refs.tab.searchProduct(value)
			},
			
			
			// toSeckillProChoose(item){
			// 	this.goPage(`/pages/marketing/seckillDemo/seckillProChoose/seckillProChoose?activityId=${item.id}`);
			// },
			
			toSeckillProChoose(item){
				let type = item.status;
				this.goPage(`/pages/marketing/seckillDemo/seckillDetail/index?activityId=${item.id}&type=${type}`);
			},
			
			goPage(url, success) {
				uni.navigateTo({
					url,
					success: success
				});
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		background-color: lightblue;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	::v-deep .u-popup.data-v-3a231fda {
		flex: 0 !important;
	}
	
	.header-top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		align-items: center;
	}
	
	.content-item {
		height: 900rpx;
		margin: 20rpx;
	}
	
	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 1000rpx;
	
		.scroll-view {
			height: 100%;
		}
	}
	

	// .content {
	// 	flex: 1;
	// 	overflow: hidden;
	// }

	// .scroll-view {
	// 	height: 100%;
	// }

	// .scroll-view-inner {
	// 	height: 200%;
	// 	/* 根据实际情况设置高度 */
	// 	background-color: #fff;
	// 	/* 内容区域背景色 */
	// }
</style>